<template>
  <div class="carousel">
    <swiper
      class="swiper"
      :modules="modules"
      :space-between="40"
      :slides-per-view="4"
      :slides-per-group="4"
      :loop="true"
      :navigation="true"
      :pagination="{ clickable: true }"
    >
      <swiper-slide v-for="like in likes">
        <div class="good-wrap" v-to-detail="router">
          <div class="img-box">
            <img :src="like.listPicUrl" alt="" :data-id="like.id" />
          </div>
          <p class="title">
            <a :data-id="like.id">{{ like.name }}</a>
          </p>
          <p class="price">
            <span class="retail-price">￥{{ like.retailPrice }}</span
            ><span class="counter-price">￥{{ like.counterPrice }}</span
            ><i class="iconfont icon-gouwuche"></i>
          </p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts">
  export default {
    name: "WCarousel",
  };
</script>

<script lang="ts" setup>
  import { Navigation, Pagination, Scrollbar, Autoplay } from "swiper";
  import { GoodDetailInfo } from "@/api/detail/interface";
  import { Swiper, SwiperSlide } from "swiper/vue";
  import { useRouter } from "vue-router";
  import "swiper/css";
  import "swiper/css/pagination";
  import "swiper/css/navigation";
  type Props = {
    likes: GoodDetailInfo[];
  };
  defineProps<Props>();
  const router = useRouter();
  const modules = [Pagination, Navigation];
</script>

<style scoped lang="less">
  .carousel {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #f5f5f5;
    margin-bottom: 40px;
  }
  .swiper {
    width: 960px;
    padding: 25px 40px;
    padding-bottom: 60px;
  }
  .good-wrap {
    .img-box {
      width: 100%;
      height: 210px;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      transition: all 0.7s;
      cursor: pointer;
      &:hover {
        transform: scale(1.1);
      }
    }
    .title {
      font-size: 13px;
      text-align: center;
      width: 160px;
      margin: 0 auto;
      font-weight: bold;
      line-height: 20px;
      margin-top: 20px;
      margin-bottom: 10px;
      a {
        color: #333;
        cursor: pointer;
        &:hover {
          color: #a7a182;
        }
      }
    }
    .price {
      font-size: 13px;
      text-align: center;
      .retail-price {
        color: #d4282d;
        margin-right: 7px;
      }
      .counter-price {
        color: #999;
        text-decoration: line-through;
      }
      i {
        border-radius: 50%;
        background-color: #f4f0eb;
        padding: 3px;
        color: #a7a182;
        font-weight: bold;
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
  :deep(.swiper-pagination) {
    bottom: 20px;
  }
  :deep(.swiper-pagination-bullet-active) {
    background-color: #a7a182;
  }
  :deep(.swiper-button-prev),
  :deep(.swiper-button-next) {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #d7ceba;
  }
  :deep(.swiper-button-prev) {
    left: 0;
  }
  :deep(.swiper-button-next){
    right: 0;
  }
  :deep(.swiper-button-prev)::after,
  :deep(.swiper-button-next)::after {
    font-size: 15px !important;
    color: #e7e7e7;
  }
</style>
